<template>
  <div class="xxzx1">
    <div class="xxzx2">
      <div class="con_boxs">
        <!-- 搜索 -->
        <div class="con_sousuo">
          <el-form
            :inline="true"
            :model="formxx"
            class="demo-form-inline"
            label-width="100px"
          >
            <el-form-item label="通知类型:">
              <el-select v-model="formxx.messageType" placeholder="请选择类型">
                <el-option label="" value=""></el-option>
                <el-option label="票据到期" value="1"></el-option>
                <el-option label="交易状态变更" value="2"></el-option>
                <el-option label="系统通知" value="3"></el-option>
                <el-option label="交易应答倒计时" value="4"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="通知时间:">
              <div class="block">
                <el-date-picker
                  v-model="formxx.messageTimeFrom"
                  type="date"
                     :formatter="dateFormat"
                     value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期"
                >
                </el-date-picker>

                <el-date-picker
                  v-model="formxx.messageTimeTo"
                  type="date"
                 :formatter="dateFormat"
                   value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </div>
            </el-form-item>
            <!-- 搜索按钮 -->
            <el-button
              icon="el-icon-search"
              type="primary"
              @click="xxList(formxx)"
              >查询</el-button
            >
          </el-form>
        </div>
        <div class="fg"></div>
        <!-- 列表 -->
        <div class="con_table">
          <div v-for="(item, index) in xzData">
            <div class="wtdq">
              <img v-if="item.messageType == 1" src="../../assets/x1.png" />
              <img v-if="item.messageType == 2" src="../../assets/x2.png" />
              <img v-if="item.messageType == 3" src="../../assets/x3.png" />
              <img v-if="item.messageType == 4" src="../../assets/x5.png" />
              <img v-if="item.messageType == 5" src="../../assets/xqqq.png" />
              <div style="margin-left: 20px">
                <p class="wtzs">{{ item.messageType }}</p>
                <p class="nr">
                  {{ item.messageContent }}
                </p>
              </div>
              <div class="yb">{{ item.createTime }}</div>
            </div>
            <div class="fg2"></div>
          </div>
        </div>
      </div>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
           @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.current"
          :page-sizes="PageRange"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </div>
      <!-- 分页end -->
    </div>
  </div>
</template>
<style >
</style>

<script>
import { queryxxx } from "@/api/leagues/app";
import moment from "moment";
export default {
  data() {
    return {
      input: "", //搜索框
      // 列表
      formxx: {
        messageType: "",
        messageTimeFrom: "",
        messageTimeTo: "",
      },
      xzData: [],
      value1: "",
PageRange:0,
      // 分页
      page: {
        current: 1, //默认从第一页开始
        PageRange: [10, 20, 30], //规定多少个页算一个区间
        total: 0,
        size: 8,
      },
    };
  },
  created() {
    // 根据分页获取对应的商品列表
    this.xxList();
  },
  //方法集合
  methods: {
    dateFormat:function(row,column){

      var date = row[column.property];

      if(date == undefined){return ''};

      return moment(date).format("YYYY-MM-DD")

    },
    // 列表操作安钮
    handleClick(row) {
      console.log(row);
      this.$router.push({
        name: "listBiaoGe",
        params: {
          // id: id
        },
      });
    },
    //列表this.formt

    xxList: function () {
      let params = this.formxx;
      let page = this.page;
      queryxxx(
        Object.assign(
          {
            current: page.current,
            size: page.size,
          },
          params
        )
      ).then((response) => {
        if (response) {
          var that = this;
          that.xzData = response.data.data.records;
          that.page.size = response.data.data.size;
          that.page.current = response.data.data.current;
          that.page.total = response.data.data.total;
          //  that.$message({
          //   duration:600,
          //   message:'查询成功',
          //   type:'success'
          // })
        } else {
          that.$message.success(response.msg);
        }
      });
    },

    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
       this.page.current = val;
      this.xxList();
      console.log(`当前页: ${val}`);
    },
    PageRangeDate() {
      this.tableData.forEach((ele) => {
        this.PageRange.push(ele.id);
      });
      console.log(this.PageRange, "tab");
    },
    // 分页end
  },
};
</script>
<style>
.xxzx1 {
  width: 1200px;
  /* height: 882px; */
  background: #ffffff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.06);
  border-radius: 6px 6px 10px 10px;
  margin: 0 auto;
  position: relative;
  top: 50%;
  padding-bottom: 66px;
}
.con_sousuo {
  padding-top: 40px;
}
.con_table {
  line-height: 47px;
  margin: 10px auto;
}

.fg {
  width: 1200px;
  height: 11px;
  background: rgba(255, 255, 255, 0);
  box-shadow: 0px 1px 0px 0px #e6e6e6;
}
.fg2 {
  width: 1200px;
  height: 11px;
  background: rgba(255, 255, 255, 0);
  box-shadow: 0px 1px 0px 0px #e6e6e6;
}
.wtdq {
  display: inline-flex;
  padding: 20px;
}
.yb {
  position: absolute;
  right: 8px;
}
.wtzs {
  height: 16px;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #051232;
  line-height: 26px;
}
.nr {
  height: 14px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #798194;
  line-height: 31px;
}
.el-pagination {
  margin-left: 23px;
}
</style>
